<template>
  <div class="contain">
    <div>
      <img style="height: 600px" src="../../../public/img/树叶.webp" alt="" />
    </div>
    <div class="img-right">
      <div class="menu-title">
        <span>个人注册</span>
      </div>
      <div>
        <el-form
          ref="persionFormRef"
          :model="persionRegister"
          center
          :rules="persionRegisteRules"
          class="demo-ruleForm"
          label-width="90px"
        >
          <el-form-item label="用户名:" prop="username">
            <el-input
              v-model="persionRegister.username"
              placeholder="请输入用户名"
            />
          </el-form-item>

          <el-form-item label="手机号:" prop="phone">
            <el-input
              v-model="persionRegister.phone"
              placeholder="请输入手机号"
              maxlength="11"
            />
          </el-form-item>
          <el-form-item label="验证码:" prop="checkCode">
            <el-input
              v-model="persionRegister.checkCode"
              size="40px"
              placeholder="请输入验证码"
              style="width: 110px"
            />
            <el-button
              style="flex:1;margin-left:10px,height-line:1;background-color:#67ABF1; color:white; "
              >获取短信验证码</el-button
            >
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input
              type="password"
              v-model="persionRegister.password"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item label="确认密码:" prop="repeatPassword">
            <el-input
              type="password"
              v-model="persionRegister.repeatPassword"
              placeholder="请输入确认密码"
            />
          </el-form-item>
          <div>
            <el-button
              class="login-bottom"
              type="primary"
              @click="registerPerson(persionFormRef, formEl)"
              >完成个人注册</el-button
            >
            <div style="text-align: center; margin: 30px 0">
              <div>
                <router-link
                  to="/login"
                  style="
                    text-decoration: underline;
                    font-size: 16px;
                    color: #2b81e2;
                  "
                  >已有账号去登录</router-link
                >
              </div>
              <el-checkbox
                v-model="checked"
                label="我已阅读同意"
                size="large"
                style="padding-top: 10px"
              />

              <a
                target="_blank"
                style="color: #2b81e2"
                href="https://pic.cuohepai.com/zhongxin/%E4%BB%98%E6%AC%BE%E6%89%BF%E8%AF%BA%E5%87%BD.pdf"
                >《保证承诺书》</a
              >
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>


<script >
import { reactive, toRefs } from "vue";
import { register } from "@/api/userRegister";
import { displayBoxInfo } from "@/utils/msg";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { md5 } from "js-md5"; // 引

export default {
  name: "persionRegister",

  setup() {
    //密码是否一致
    const checkPwd = (rule, value, callback) => {
      if (value !== data.persionRegister.password) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };

    const router = useRouter();

    let data = reactive({
      checked: false, //判断是否勾选保证承诺书
      persionFormRef: "",
      persionRegister: {
        username: "",
        phone: "",
        password: "",
        repeatPassword: "",
        checkCode: "",
      },
      persionRegisteRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/,
            message: "手机号码错误",
            trigger: "blur",
          },
        ],
        checkCode: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { pattern: /^\S{6,}$/, message: "密码不能小于6位", trigger: "blur" },
        ],
        repeatPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { pattern: /^\S{6,}$/, message: "密码不能小于6位", trigger: "blur" },
          { validator: checkPwd, trigger: "blur" },
        ],
      },
    });

    //个人注册必填项兜底校验
    let registerPerson = async (formEl) => {
      if (!formEl) return;
      await formEl.validate(async (valid, fields) => {
        if (valid) {
          if (!data.checked) {
            ElMessage.warning("请阅读并且勾选 <<保证承诺书>>");
          } else {
            var md5Password = md5(
              data.persionRegister.password + data.persionRegister.phone
            );
            let params = {
              username: data.persionRegister.username,
              phone: data.persionRegister.phone,
              password: md5Password,
              checkCode: data.persionRegister.checkCode,
            };
            register(params).then((res) => {
              displayBoxInfo(res.code, res.msg);
              if (res.code == 1) {
                router.push({ name: "login" });
              }
            });
          }
        }
      });
    };

    return {
      ...toRefs(data),
      registerPerson,
    };
  },
};
</script >

<style  less scoped>
.contain {
  display: flex;
  justify-content: center;
  padding-top: 5%;
}

.img-right {
  border: 1px solid red;
  width: 350px;
  height: 600px;
  background-color: white;
  padding: 0 50px;
}

.el-input__wrapper {
  flex-grow: 0 !important;
}

.login-bottom {
  height: 40px;
  width: 100%;
  font-size: 16px;
  text-align: center;
}

.menu-title {
  font-size: 24px;
  text-align: center;
  padding: 50px;
  font-weight: 700;
  color: rgb(36, 23, 153);
}

.el-form-item >>> .el-form-item__error {
  font-size: 14px !important;
}
</style>